import React from 'react';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import CustomButton from './CustomButton';
import './customComponents.css';

interface CustomAlertProps {
  message: string;
  description?: string;
  type: 'success' | 'info' | 'warning' | 'error';
  action?: React.ReactNode;
  style?: React.CSSProperties;
}

const CustomAlert: React.FC<CustomAlertProps> = ({ 
  message, 
  description, 
  type,
  action,
  style = {} 
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const getTypeStyle = () => {
    switch (type) {
      case 'success':
        return {
          backgroundColor: mode === 'dark' ? 'rgba(82, 196, 26, 0.1)' : 'rgba(82, 196, 26, 0.05)',
          border: `1px solid ${mode === 'dark' ? 'rgba(82, 196, 26, 0.3)' : 'rgba(82, 196, 26, 0.2)'}`
        };
      case 'info':
        return {
          backgroundColor: mode === 'dark' ? 'rgba(24, 144, 255, 0.1)' : 'rgba(24, 144, 255, 0.05)',
          border: `1px solid ${mode === 'dark' ? 'rgba(24, 144, 255, 0.3)' : 'rgba(24, 144, 255, 0.2)'}`
        };
      case 'warning':
        return {
          backgroundColor: mode === 'dark' ? 'rgba(250, 173, 20, 0.1)' : 'rgba(250, 173, 20, 0.05)',
          border: `1px solid ${mode === 'dark' ? 'rgba(250, 173, 20, 0.3)' : 'rgba(250, 173, 20, 0.2)'}`
        };
      case 'error':
        return {
          backgroundColor: mode === 'dark' ? 'rgba(255, 77, 79, 0.1)' : 'rgba(255, 77, 79, 0.05)',
          border: `1px solid ${mode === 'dark' ? 'rgba(255, 77, 79, 0.3)' : 'rgba(255, 77, 79, 0.2)'}`
        };
      default:
        return {
          backgroundColor: mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.05)',
          border: `1px solid ${theme.borderColor}`
        };
    }
  };

  // 根据主题模式设置阴影效果
  const getBoxShadow = () => {
    if (mode === 'light') {
      return '0 4px 12px rgba(0, 0, 0, 0.05)';
    }
    return 'none';
  };

  return (
    <div
      className="custom-alert"
      style={{
        display: 'flex',
        alignItems: 'flex-start',
        padding: '16px',
        borderRadius: '6px',
        boxShadow: getBoxShadow(),
        ...getTypeStyle(),
        ...style
      }}
    >
      <div style={{ flex: 1 }}>
        <div style={{ 
          fontWeight: 500, 
          marginBottom: description ? '4px' : 0,
          color: theme.textPrimary
        }}>
          {message}
        </div>
        {description && (
          <div style={{ color: theme.textSecondary, fontSize: '14px' }}>
            {description}
          </div>
        )}
      </div>
      {action && (
        <div style={{ marginLeft: '16px' }}>
          {action}
        </div>
      )}
    </div>
  );
};

export default CustomAlert;